<template>
	<view>
		<!-- 藏品未到转赠期弹框 -->
		<view @touchmove.stop.prevent="stopRoll" class="stopRoll">
			<view @touchmove.prevent :style="untimelyShow ? 'height: 100vh; width: 100%; position:fixed; z-index: 999;' : ''">
				<u-popup ref="untimelyShow" bgColor="transparent" :show="untimelyShow" round="20" :closeOnClickOverlay="true" mode="center" @close="onClear()">
					<view class="countDown">
						<view class="countDownImg"><u--image shape="circle" width="198rpx" height="198rpx" src="/static/collection/accelerate.png"></u--image></view>
						<view class="countDownText">
							<view class="countDownTitle">该藏品未到转赠期</view>
							<view class="countDownFont">{{ times }}后可转赠</view>
						</view>
						<view class="viewBtn">

							<view class="countDownBtn countClear" @tap="onClear()">取消</view>
							<view class="countDownBtn countGoto" :class="configure.already >= configure.max ? 'prohibit' : ''"  @tap="onGoto(1)">使用加速卡</view>
							<!-- <view class="countDownBtn countGoto" @tap="onGoto(1)">{{user.quicken ? '使用加速卡' : '获取加速卡'}}</view> -->
							<view class="bubble" style="right: -120rpx" v-if="user.quicken">
								<!-- <view class="bubble" :style="user.quicken ? 'right: -120rpx;': 'right: -10rpx;'"> -->
								<view class="bubbles">
									<view class="bubbleFont" v-if="configure.already >= configure.max">
										已达可加速上限
									</view>
									<view class="bubbleFont" v-else>
										使用现有加速卡可加速转赠
									</view>
									<!-- <view class="bubbleFont" v-else>
										您还未获得加速卡，请前往任务中心获取
									</view> -->
								</view>
								<view class="bubbleConts"></view>
								<!-- <view class="bubbleConts" :style="user.quicken ? '': 'right: 120rpx;'"></view> -->
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<!-- 藏品转赠弹框 -->
		<view @touchmove.stop.prevent="stopRoll" class="stopRoll">
			<view @touchmove.prevent :style="transferShow ? 'height: 100vh; width: 100%; position:fixed; z-index: 999;' : ''">
				<u-popup :show="transferShow" mode="bottom" bgColor="transparent" :closeOnClickOverlay="true" @close="onTransferShow()" overlayOpacity="0.7" :round="10">
					<view class="transferShow">
						<view class="transferTop">
							<view class="titles">
								<view class="titleLeft">
									<view class="leftImg">
										<u--image width="177rpx" height="29rpx" src="/static/collection/fonts.png"></u--image>
									</view>
									<view class="rightImg">
										<u--image shape="circle" width="31rpx" height="31rpx" src="/static/collection/lightning.png"></u--image>
									</view>
								</view>
								<view class="titleRight" @click="onSwitch(3, 'close')">
									<u--image shape="circle" width="47rpx" height="47rpx" src="/static/collection/close.png"></u--image>
								</view>
							</view>
							<view class="titleFont">
								<text class="timeFont">{{ times }}</text> 后可转赠，推荐使用<text> {{ configure.recommend }} </text>张加速卡
							</view>
						</view>
						<view class="transferCenter">
							<view class="leftImg">
								<u--image shape="circle" width="172rpx" height="178rpx" src="/static/collection/transferImg.png"></u--image>
							</view>
							<view class="rightCont">
								<view class="contTitle">
									<view class="titleRightFont">
										转赠加速卡
									</view>
									<view class="titleLeftFont">
										当前持有：<text>{{user.quicken}}</text>
									</view>
								</view>
								<view class="explain">
									<view class="explainFont">
										单张可缩短转赠限制时长{{configure.day * 24}}小时（{{configure.day}}天）
									</view>
									<view class="explainFont">
										单次流转内一个藏品最多可使用5张
									</view>
									<view class="explainFont">
										转赠成功后使用次数自动刷新
									</view>
								</view>
							</view>
						</view>
						<view class="transferBottom">
							<view class="times">
								<view class="timesFont">
									预计可缩短转赠限制时间：<text>{{configure.day * value}}</text>天
								</view>
								<view class="numberBox">
									<u-number-box :step="1" :min="1" :max="Number(user.quicken) < Number(configure.recommend) ? Number(user.quicken) : Number(configure.recommend)" :integer="true" :value="value" @change="onChange" ></u-number-box>
								</view>
							</view>
							<view class="bottomBtn" @tap="onGoto(3)">
								<view class="btn">
									立即加速
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<!-- 加速成功弹框 -->
		<view @touchmove.stop.prevent="stopRoll" class="stopRoll">
			<view @touchmove.prevent :style="acceleratedSuccessShow ? 'height: 100vh; width: 100%; position:fixed; z-index: 999;' : ''">
				<u-popup ref="acceleratedSuccessShow" bgColor="transparent" :show="acceleratedSuccessShow" round="20" :closeOnClickOverlay="true" mode="center">
					<view class="countDown">
						<view class="countDownImg"><u--image shape="circle" width="98rpx" height="98rpx" src="/static/collection/success.png"></u--image></view>
						<view class="countDownText">
							<view class="countDownTitle">加速成功</view>
							<view class="countDownFont" v-if="endTime != 'clear' && endTime"><text>{{ endTime }}</text>后可转赠</view>
							<view class="countDownFont" v-else>该藏品现已支持转赠</view>
						</view>
						<view class="viewBtn">
							<view class="countDownBtn countClear" :style="(endTime != 'clear' && endTime) ? 'width:94%' : ''" @tap="onBackDetails()">返回详情</view>
							<view class="countDownBtn countGoto" v-if="!(endTime != 'clear' && endTime)" @tap="onGoto(2)">前往转赠</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		quicken_configure,
		quicken_nft
	} from '@/api/collection.js'
	import {
		userInfoApi,
	} from '@/api/index.js'
	import {
		countDown
	} from '@/common/filter.js'
export default {
	computed: {
		...mapState({
			user: state => state.userInfo
		})
	},
	props: {
		proData: Object,
		times: String,
		box_id: [Number, String]
	},
	data() {
		return {
			untimelyShow: false, //藏品未到转增期弹框
			acceleratedSuccessShow: false, //加速成功弹框
			transferShow: false ,//藏品转增弹框
			value: 1,//步进器转赠卡数量
			configure: {},//加速卡配置
			id: this.box_id,
			tims: '',
			endTime: ''//加速完后的时间
		};
	},
	mounted() {
		this.getConfigure();
		this.getUserInfo();
	},
	methods: {
		...mapMutations(['setUserInfo']),
		async getUserInfo() {
			try {
				const res = await userInfoApi({})
				this.userInfo = res.data
				this.setUserInfo(res.data)
			} catch (e) {
				console.log(e)
			}
		},
		onTransferShow(){
			this.transferShow = false
			this.value = 1
		},
		/**
		 * @param {Object} e 步进器触发
		 */
		onChange(e){
			this.value = e.value
		},
		handle() {
			this.$emit('click', this.proData);
		},
		async getConfigure() {
			try {
				let _this = this
				const res = await quicken_configure({
					box_id: this.id
				})
				this.configure = res.data
			} catch (e) {
				uni.showToast({
					title: e.data || e.message,
					icon: 'none'
				})
			}
		},
		/**
		 * @param {Number} type 右侧按钮状态点击  1为藏品未到转增期弹框点击  2为加速成功弹框点击 3立即加速
		 */
		onGoto(type){
			// this.$refs.uToast.show({
			// 	title:'您当前未持有加速卡'
			// })
			switch (type){
				case 1:
					//用户若有转赠卡并且没有超出最大使用次数则显示
					if(this.user.quicken){
						if(this.configure.already < this.configure.max){
							this.onSwitch(3, 'open')
						}
					} else {
						this.onSwitch(1, 'close')
						uni.showToast({
							title: '您当前未持有加速卡',
							icon: 'none'
						})
					}
					break;
				case 2:
					this.onClear()
					this.$emit('successGoto')
					break;
				case 3:
					this.onAccelerate()
					break
				default:
					break;
			}
		},
		//使用加速方法
		async onAccelerate(){
			console.log(this.value)
			uni.showLoading();
			try {
				let _this = this
				const res = await quicken_nft({
					quantity: this.value,
					box_id: this.id
				})
				if (this.$rsa.nowTime.call(this) < res.data.remaining_time) {
					this.$nextTick(() => {
						const times = 1000
						_this.tims = setInterval(function() {
							_this.endTime = countDown(res.data.remaining_time, 'dayType')
							if (_this.endTime == 'clear') {
								clearInterval(_this.tims)
							}
							console.log(_this.endTime)
						}, times);
						_this.onSuccess()
					})
				} else {
					_this.onSuccess()
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({
					title: e.data || e.message,
					icon: 'none'
				})
			}

		},
		onSuccess(){
			setTimeout(()=>{
				uni.hideLoading()
				this.onClear();
				this.onSwitch(2, 'open')
			}, 1500)
		},
		//关闭弹框
		onClear(){
			this.onSwitch(1, 'close')
			this.onSwitch(2, 'close')
			this.onSwitch(3, 'close')
		},
		//加速成功返回详情
		onBackDetails(){
			this.onClear()
			clearInterval(this.tims)
			this.$emit('getDetail')
		},
		/**
		 * @param {Object} status		1藏品未到转增期弹框 2加速成功弹框 3藏品转增弹框
		 * @param {Object} switchTypes	open 开启  close 关闭
		 */
		onSwitch(status, switchTypes) {
			const actions = this.onListMap();
			let action = [...actions].filter(([key, value]) => (key.switchTypes == switchTypes && key.status ==
				status))
			action.forEach(([key, value]) => value.call(this))
		},
		onListMap() {
			const actions = new Map([
				[{
					switchTypes: 'close',
					status: 1
				}, () => {
					this.untimelyShow = false
				}],
				[{
					switchTypes: 'open',
					status: 1
				}, () => {
					this.untimelyShow = true
				}],
				[{
					switchTypes: 'close',
					status: 2
				}, () => {
					this.acceleratedSuccessShow = false
				}],
				[{
					switchTypes: 'open',
					status: 2
				}, () => {
					this.acceleratedSuccessShow = true
				}],
				[{
					switchTypes: 'close',
					status: 3
				}, () => {
					this.transferShow = false
				}],
				[{
					switchTypes: 'open',
					status: 3
				}, () => {
					this.transferShow = true
				}]
			])
			return actions
		},
	}
};
</script>

<style lang="scss" scoped>
	::v-deep .u-number-box__minus{
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
	}
	::v-deep .u-number-box__plus{
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	::v-deep .u-number-box__input{
		margin: 0 1px;
	}
	.transferShow{
		background: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 53rpx 40rpx;
		.transferTop{
			margin-bottom: 49rpx;
			.titles{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;
				.titleLeft{
					display: flex;
					align-items: center;
					.leftImg{
						margin-right: 17rpx;
					}
				}
			}
			.titleFont{
				font-size: 24rpx;
				color: #000;
				.timeFont{
					margin: 0rpx 10rpx 0 0!important;
				}
				text{
					font-weight: 700;
					margin: 0rpx 10rpx;
				}
			}
		}
		.transferCenter{
			background: #F3F5F9;
			border-radius: 50rpx;
			padding: 47rpx 39rpx 47rpx 23rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34rpx;
			.rightCont{
				.contTitle{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					color: #000;
					margin-bottom: 35rpx;
					.titleRightFont{
						font-size: 28rpx;
						font-weight: 700;
					}
					.titleLeftFont{
						font-size: 22rpx;
						text{
							font-weight: 700;
						}
					}
				}
				.explain{
					line-height: 42rpx;
					.explainFont{
						color: #7e7f82;
						font-size: 21rpx;
					}
				}
			}
		}
		.transferBottom{
			.times{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 34rpx;
				.timesFont{
					font-size: 24rpx;
					color: #000;
					text{
						color: #2EC567;
						font-weight: 700;
					}
				}
			}
			.bottomBtn{
				width: 100%;
				padding: 35rpx 0;
				background: #000;
				border-radius: 100rpx;
				box-shadow: 0rpx 14rpx 20rpx #c1c1c1;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
				}
			}
		}
	}
.countDown {
	// background: url('/static/img/bgkImg.png') no-repeat;
	// background-size: 100% 100%;
	background: #26282b;
	border-radius: 40rpx;
	margin: auto;
	padding: 67rpx 53rpx 67rpx;
	width: 550rpx;

	.countDownImg {
		display: flex;
		justify-content: center;
	}

	.countDownText {
		margin: 53rpx 0 65rpx;
		text-align: center;

		.countDownTitle {
			margin-bottom: 30rpx;
			font-size: 35rpx;
			color: #ffffff;
			font-weight: 700;
		}

		.countDownFont {
			font-size: 24rpx;
			color: #b1b1b1;
			text{
				margin-right: 10rpx;
			}
		}
	}

	.viewBtn{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		position: relative;
		.countDownBtn {
			border-radius: 80rpx;
			width: 40%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			padding: 28rpx 0;
			font-size: 24rpx;
			font-weight: 700;
		}
		.countClear{
			background: #3c3e41;
			color: #fff;
		}
		.countGoto{
			background: #ffffff;
			color: #000;
		}
		.prohibit{
			background: #969696!important;
		}
		.bubble{
			position: absolute;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			top: -50rpx;
			.bubbles{
				position: absolute;
				border-radius: 50rpx;
				background: #363642;
				padding: 12rpx 27rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
				.bubbleFont{
					font-size: 22rpx;
					color: #fff;
				}
			}
			.bubbleConts{
				width: 40rpx;
				height: 40rpx;
				background: #363642;
				transform: rotate(45deg);
				position: absolute;
				z-index: 1;
				top: 0rpx;
			}
		}
	}
}
</style>
